<div class="tool-bar">
  <div class="button-bar">
    <span><B>区域公司：</B><select><option value ="volvo">乌江</option></select><B>电站：</B><select><option value ="volvo">洪家渡</option></select></span>
  </div>
  <div class="time-ctrl">
    <button class="btn btn-sm btn-default" (click)="goBack(true)"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
  </div>
</div>
<div class="main-body">
  <div class="container-fluid">
    <div class="row" style="margin-top: 5px">
      <div class="col-md-3 col-style">
        <div class="water-control">
          <div class="water water-1">正常高水位：{{waterLevel.highlevel}}m</div>
          <div class="water water-2 ">汛限水位:{{waterLevel.limitlevel}}m</div>
          <div class="water water-3">死水位：{{waterLevel.deathlevel}}m</div>
          <div class="now-level">
            <div class="line"></div>
            <div class="water-4">当前水位：{{waterLevel.nowlevel}}m</div>
          </div>
        </div>
      </div>
      <!--折线图-->
      <div class="col-sm-6" style="border: 1px solid #7791ff;height: 330px;">
        <app-chart-load-curve></app-chart-load-curve>
      </div>
      <!--表格-->
      <div class="col-sm-3" style="height: 300px;padding: 0">
        <div class="panel panel-default panel-primary ">
          <div class="panel-heading analysis-panel-heading">
            发电指标
          </div>
          <div class="panel-body text-center" style="padding: 0 10px 0 0">
            <app-table-generation></app-table-generation>
          </div>
        </div>
      </div>
    </div>
<!--机组状态-->
    <div class="row status-bar">
      <div class="col-sm-1">机组状态</div>
      <div class="co-sm-1">
        <button class='button' (click)="perform(2)" [class.active]="stu===2">监测状态</button>
      </div>
      <div class="co-sm-1">
        <button class='button' (click)="perform(1)" [class.active]="stu===1">性能状态</button>
      </div>
      <div class="co-sm-1">
        <button class='button' (click)="perform(0)" [class.active]="stu===0">健康状态
        </button>
      </div>
      <div class="status-switch"[ngSwitch]="stu">
        <!--健康状态-->
        <div class="status-switch2" *ngSwitchCase="0">
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-1"></div>
              <div class="col-sm-7 status-name">中断</div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-2"></div>
              <div class="col-sm-7 status-name">健康</div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-4"></div>
              <div class="col-sm-7 status-name">亚健康</div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-5"></div>
              <div class="col-sm-7 status-name">不健康</div>
            </div>
          </div>
        </div>
        <!--性能状态-->
        <div class="status-switch2" *ngSwitchCase="1">
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-1"></div>
              <div class="col-sm-7 status-name">中断</div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-2"></div>
              <div class="col-sm-7 status-name">良好</div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-4"></div>
              <div class="col-sm-7 status-name">一般</div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-5"></div>
              <div class="col-sm-7 status-name">较差</div>
            </div>
          </div>
        </div>
        <!--监测状态-->
        <div class="status-switch2" *ngSwitchCase="2">
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-1"></div>
              <div class="col-sm-7 status-name">中断</div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-2"></div>
              <div class="col-sm-7 status-name">正常</div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-4"></div>
              <div class="col-sm-7 status-name">预警</div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="row">
              <div class="col-sm-5 status-icon status-icon-6"></div>
              <div class="col-sm-7 status-name">报警</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div [ngSwitch]="stu">
      <!--健康状态-->
      <div *ngSwitchCase="0">
        <app-chart-cabin-performance [units]="units1">
        </app-chart-cabin-performance>
      </div>
      <!--性能状态-->
      <div *ngSwitchCase="1">
        <app-chart-cabin-performance [units]="units2">
        </app-chart-cabin-performance></div>
      <!--监测状态-->
      <div *ngSwitchCase="2">
        <app-chart-cabin-performance [units]="units2">
        </app-chart-cabin-performance></div>
    </div>
  </div>
</div>
